<template>
  <div class="container">
    <div style="margin: 50px">
      <h2>概述</h2>
      <p style="margin-bottom: 20px">选项卡切换组件，常用于平级区域大块内容的的收纳和展现。</p>
      <h3>基础用法</h3>
      <Tabs value="name1">
        <TabPane label="标签一" name="name1">标签一的内容</TabPane>
        <TabPane label="标签二" name="name2">标签二的内容</TabPane>
        <TabPane label="标签三" name="name3">标签三的内容</TabPane>
      </Tabs>
    </div>
    <hr>
    <div style="margin: 50px">
      <h3>禁用某一项</h3>
      <Tabs>
        <TabPane label="标签一">标签一的内容</TabPane>
        <TabPane label="标签二" disabled>标签二的内容</TabPane>
        <TabPane label="标签三">标签三的内容</TabPane>
      </Tabs>
    </div>
    <hr>
    <div style="margin: 50px">
      <h3>图标</h3>
      <Tabs>
        <TabPane label="macOS" icon="logo-apple">标签一的内容</TabPane>
        <TabPane label="Windows" icon="logo-windows">标签二的内容</TabPane>
        <TabPane label="Linux" icon="logo-tux">标签三的内容</TabPane>
      </Tabs>
    </div>
    <hr>
    <div style="margin: 50px">
      <h3>迷你型</h3>
      <Tabs size="small">
        <TabPane label="标签一">标签一的内容</TabPane>
        <TabPane label="标签二">标签二的内容</TabPane>
        <TabPane label="标签三">标签三的内容</TabPane>
      </Tabs>
    </div>

    <hr>
    <div style="margin: 50px">
      <h3>卡片样式</h3>
      <Tabs type="card">
        <TabPane label="标签一">标签一的内容</TabPane>
        <TabPane label="标签二">标签二的内容</TabPane>
        <TabPane label="标签三">标签三的内容</TabPane>
      </Tabs>
    </div>

    <hr>
    <div style="margin: 50px">
      <h3>可关闭</h3>
      <Tabs type="card" closable @on-tab-remove="handleTabRemove">
        <TabPane label="标签一" v-if="tab0">标签一的内容</TabPane>
        <TabPane label="标签二" v-if="tab1">标签二的内容</TabPane>
        <TabPane label="标签三" v-if="tab2">标签三的内容</TabPane>
      </Tabs>
    </div>

    <hr>
    <div style="margin: 50px">
      <h3>自定义</h3>
      <Tabs value="name1">
        <TabPane :label="label" name="name1">标签一的内容</TabPane>
        <TabPane label="标签二" name="name2">标签二的内容</TabPane>
        <TabPane label="标签三" name="name3">标签三的内容</TabPane>
      </Tabs>
    </div>

    <hr>
    <div style="margin: 50px">
      <h3>附加内容</h3>
      <Tabs type="card">
        <TabPane v-for="tab in tabs" :key="tab" :label="'标签' + tab">标签{{ tab }}</TabPane>
        <Button @click="handleTabsAdd" size="small" slot="extra">增加</Button>
      </Tabs>
    </div>

    <hr>
    <div style="margin: 50px">
      <h3>不使用动画</h3>
      <Tabs :animated="false">
        <TabPane label="标签一">标签一的内容</TabPane>
        <TabPane label="标签二">标签二的内容</TabPane>
        <TabPane label="标签三">标签三的内容</TabPane>
      </Tabs>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        tab0: true,
        tab1: true,
        tab2: true,
        tabs: 2,
        label: (h) => {
          return h('div', [
            h('span', '标签一'),
            h('Badge', {
              props: {
                count: 3
              }
            })
          ])
        }
      }
    },
    methods: {
      handleTabRemove(name) {
        this['tab' + name] = false;
      },
      handleTabsAdd() {
        this.tabs++;
      }
    }
  }
</script>

<style scoped>
  h3 {
    margin: 10px 0;
  }
</style>
